import React from "react";
import { Layout } from "antd";
import { HashRouter, Route, NavLink, Redirect } from "react-router-dom";
import "./style.scss";
import { AsyncPage } from "@/utils/util";

const PersonInformation = AsyncPage(() => import("./personInformation"));
const SetPassword = AsyncPage(() => import("./setPassword"));
const UserManger = AsyncPage(() => import("./userManger"));
const OrderManagement = AsyncPage(() => import("./ordermanagement"));

const { Sider } = Layout;

function User() {
    const sideList = [
        { name: "个人信息", to: "/main/user/personInformation", icon: "person" },
        { name: "密码设置", to: "/main/user/setPassword", icon: "psd" },
        { name: "用户管理", to: "/main/user/userManger", icon: "userManger" },
        { name: "指令管理", to: "/main/user/ordermanagement", icon: "order" }
    ];

    return (
        <Layout>
            <Sider
                className="user-side"
                style={{
                    overflow: "auto",
                    height: "100vh",
                    position: "fixed",
                    left: 0
                }}
            >
                <ul className="side-list">
                    {sideList.length > 0 &&
                        sideList.map((item, index) => {
                            return (
                                <li key={index} className="side-list-item">
                                    <NavLink to={item.to}>
                                        <i className={`item-icon ${item.icon}`} />
                                        <span>{item.name}</span>
                                        <i className="allow-icon" />
                                    </NavLink>
                                </li>
                            );
                        })}
                </ul>
            </Sider>
            <Layout style={{ marginLeft: 260, background: "#212734" }}>
                <div className="user-content">
                    <HashRouter>
                        <Route exact path="/" render={() => <Redirect to="/main/user/personInformation" />} />
                        <Route path="/main/user/personInformation" component={PersonInformation} />
                        <Route path="/main/user/setPassword" component={SetPassword} />
                        <Route path="/main/user/userManger" component={UserManger} />
                        <Route path="/main/user/ordermanagement" component={OrderManagement} />
                    </HashRouter>
                </div>
            </Layout>
        </Layout>
    );
}

export default User;
